page {
    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: 20rpx;
    font-size: 28rpx;
    font-family: "PingFang SC", Arial, "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
    color: $uni-color-main;
    background-color: $uni-bg-pages;
}

/* 背景颜色 */
.bg-pages { background-color: $uni-bg-pages; }
.bg-white { background-color: $uni-bg-white; }
.bg-black { background-color: $uni-bg-black; }
.bg-muted { background-color: $uni-bg-muted; }
.bg-normal { background-color: $uni-bg-normal; }
.bg-light { background-color: $uni-bg-light; }
.bg-success { background-color: $uni-bg-success; }
.bg-warning { background-color: $uni-bg-warning; }
.bg-error { background-color: $uni-bg-error; }

/* 字体颜色 */
.color-white { color: $uni-color-white; }
.color-black { color: $uni-color-black; }
.color-main { color: $uni-color-main; }
.color-text { color: $uni-color-text; }
.color-muted { color: $uni-color-muted; }
.color-normal { color: $uni-color-normal; }
.color-lighter { color: $uni-color-lighter; }
.color-success { color: $uni-color-success; }
.color-warning { color: $uni-color-warning; }
.color-error { color: $uni-color-error; }

/* 字体大小 */
.font-xs { font-size: 24rpx; }
.font-sm { font-size: 26rpx; }
.font-bm { font-size: 28rpx; }
.font-lg { font-size: 30rpx; }
.font-xl { font-size: 32rpx; }
.font-2xl { font-size: 34rpx; }
.font-3xl { font-size: 36rpx; }
.font-4xl { font-size: 38rpx; }
.font-5xl { font-size: 40rpx; }
.font-6xl { font-size: 42rpx; }
.font-7xl { font-size: 44rpx; }
.font-8xl { font-size: 46rpx; }
.font-9xl { font-size: 48rpx; }
.font-xxl { font-size: 60rpx; }

/* 字体粗细 */
.font-weight-thin { font-weight: 100; }
.font-weight-fine { font-weight: 200; }
.font-weight-light { font-weight: 300; }
.font-weight-normal { font-weight: 400; }
.font-weight-medium { font-weight: 500; }
.font-weight-semi { font-weight: 600; }
.font-weight-bold { font-weight: 700; }
.font-weight-extra { font-weight: 800; }
.font-weight-black { font-weight: 900; }

/* 字体样式 */
.font-style-italic { font-style: italic; }
.font-style-normal { font-style: normal; }

/* 文本装饰 */
.text-decor-underline { text-decoration: underline; }
.text-decor-through { text-decoration: line-through; }
.text-decor-none { text-decoration: none; }

/* 文本转换 */
.text-trans-uppercase { text-transform: uppercase; }
.text-trans-lowercase { text-transform: lowercase; }
.text-trans-capitalize { text-transform: capitalize; }
.text-trans-none { text-transform: none; }

/* 文本对齐 */
.text-align-left { text-align: left; }
.text-align-center { text-align: center; }
.text-align-right { text-align: right; }
.text-align-justify { text-align: justify; }

/* 垂直对齐 */
.ver-align-baseline { vertical-align: baseline; }
.ver-align-top { vertical-align: top; }
.ver-align-middle { vertical-align: middle; }
.ver-align-bottom { vertical-align: bottom; }
.ver-align-text-top { vertical-align: text-top; }
.ver-align-text-bottom { vertical-align: text-bottom; }

/* 文本行高 */
.leading-3 { line-height: 0.75rem; }
.leading-4 { line-height: 1rem; }
.leading-5 { line-height: 1.25rem; }
.leading-6 { line-height: 1.5rem; }
.leading-7 { line-height: 1.75rem; }
.leading-8 { line-height: 2rem; }
.leading-9 { line-height: 2.25rem; }
.leading-10 { line-height: 2.5rem; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-normal { line-height: 1.5; }
.leading-relaxed { line-height: 1.625; }
.leading-loose { line-height: 2; }

/* 文本溢出 */
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.truncate-clip { text-overflow: clip; }
.truncate-ellipsis { text-overflow: ellipsis; }
.truncate-line-1 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 1; }
.truncate-line-2 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.truncate-line-3 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.truncate-line-4 { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; word-break: break-all; -webkit-box-orient: vertical; -webkit-line-clamp: 4; }

/* 宽高铺满 */
.w-h-full { width: 100%; height: 100%; }
.w-h-half { width: 50%; height: 50%; }

/* 最小宽度 */
.min-w-0 { min-width: 0; }
.min-w-full { min-width: 100%; }
.min-w-min { min-width: min-content; }
.min-w-max { min-width: max-content; }

/* 最大宽度 */
.max-w-0 { max-width: 0; }
.max-w-full { max-width: 100%; }
.max-w-min { max-width: min-content; }
.max-w-max { max-width: max-content; }

/* 最小高度 */
.min-h-0 { min-height: 0; }
.min-h-full { min-height: 100%; }
.min-h-min { min-height: min-content; }
.min-h-max { min-height: max-content; }

/* 最大宽度 */
.max-h-0 { max-height: 0; }
.max-h-full { max-height: 100%; }
.max-h-min { max-height: min-content; }
.max-h-max { max-height: max-content; }

/* Flex */
.flex { display: flex; }
.flex-inline { display: inline-flex; }
.flex-none { flex: none; }
.flex-auto { flex: 1 1 auto; }
.flex-initial { flex: 0 1 auto; }
.flex-1 { flex: 1 1 0%; }
.flex-2 { flex: 2; }
.flex-3 { flex: 3; }
.flex-4 { flex: 4; }
.flex-5 { flex: 5; }
.flex-6 { flex: 6; }
.flex-7 { flex: 7; }
.flex-8 { flex: 8; }
.flex-9 { flex: 9; }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }

/* Flex Wrap */
.flex-wrap { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-wrap-reverse { flex-wrap: wrap-reverse; }

/* Flex Grow */
.flex-grow-0 { flex-grow: 0; }
.flex-grow { flex-grow: 1; }

/* Flex Shrink */
.flex-shrink-0 { flex-shrink: 0; }
.flex-shrink { flex-shrink: 1; }

/* Flex Direction */
.flex-row { flex-direction: row; }
.flex-col { flex-direction: column; }
.flex-row-reverse { flex-direction: row-reverse; }
.flex-col-reverse { flex-direction: column-reverse; }

/* Justify Content */
.justify-start { justify-content: flex-start; }
.justify-end { justify-content: flex-end; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.justify-around { justify-content: space-around; }
.justify-evenly { justify-content: space-evenly; }

/* Align Content */
.content-center { align-content: center; }
.content-start { align-content: flex-start; }
.content-end { align-content: flex-end; }
.content-between { align-content: space-between; }
.content-around { align-content: space-around; }
.content-evenly { align-content: space-evenly; }

/* Align Items */
.items-start { align-items: flex-start; }
.items-end { align-items: flex-end; }
.items-center { align-items: center; }
.items-baseline { align-items: baseline; }
.items-stretch { align-items: stretch; }

/* Align Self */
.self-auto { align-self: auto; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }
.self-center { align-self: center; }
.self-stretch { align-self: stretch; }
.self-baseline { align-self: baseline; }

/* Order */
.order-1 { order: 1; }
.order-2 { order: 2; }
.order-3 { order: 3; }
.order-4 { order: 4; }
.order-5 { order: 5; }
.order-6 { order: 6; }
.order-7 { order: 7; }
.order-8 { order: 8; }
.order-9 { order: 9; }
.order-10 { order: 10; }
.order-11 { order: 11; }
.order-12 { order: 12; }
.order-first { order: -9999; }
.order-last { order: 9999; }
.order-none { order: 0; }

/* Display */
.dis-block { display: block; }
.dis-hidden { display: none; }
.dis-inline { display: inline; }
.dis-table { display: table; }
.dis-inline-block { display: inline-block; }
.dis-inline-table { display: inline-table; }

/* Float */
.float-right { float: right; }
.float-left { float: left; }
.float-none { float: none; }
.clear-left { clear: left; }
.clear-right { clear: right; }
.clear-both { clear: both; }
.clear-none { clear: none; }

/* 定位元素 */
.fix-static { position: static; }
.fix-fixed { position: fixed; }
.fix-absolute { position: absolute; }
.fix-relative { position: relative; }
.fix-sticky { position: sticky; }
.inset-0 { inset: 0; }
.inset-x-0 { right: 0; left: 0; }
.inset-y-0 { top: 0; bottom: 0; }
.z-0 { z-index: 0; }
.z-10 { z-index: 10; }
.z-20 { z-index: 20; }
.z-30 { z-index: 30; }
.z-40 { z-index: 40; }
.z-50 { z-index: 50; }
.z-60 { z-index: 60; }
.z-auto { z-index: auto; }
.z-1000 { z-index: 1000; }
.z-2000 { z-index: 2000; }
.z-3000 { z-index: 3000; }

/* 可见元素 */
.visible { visibility: visible; }
.invisible { visibility: hidden; }

/* 溢出元素 */
.overflow-auto { overflow: auto; }
.overflow-hidden { overflow: hidden; }
.overflow-visible { overflow: visible; }
.overflow-scroll { overflow: scroll; }
.overflow-x-auto { overflow-x: auto; }
.overflow-y-auto { overflow-y: auto; }
.overflow-x-hidden { overflow-x: hidden; }
.overflow-y-hidden { overflow-y: hidden; }
.overflow-x-visible { overflow-x: visible; }
.overflow-y-visible { overflow-y: visible; }
.overflow-x-scroll { overflow-x: scroll; }
.overflow-y-scroll { overflow-y: scroll; }

/* 滚动边界 */
.overscroll-auto { overscroll-behavior: auto; }
.overscroll-contain { overscroll-behavior: contain; }
.overscroll-none { overscroll-behavior: none; }
.overscroll-y-auto { overscroll-behavior-y: auto; }
.overscroll-y-contain { overscroll-behavior-y: contain; }
.overscroll-y-none { overscroll-behavior-y: none; }
.overscroll-x-auto { overscroll-behavior-x: auto; }
.overscroll-x-contain { overscroll-behavior-x: contain; }
.overscroll-x-none { overscroll-behavior-x: none; }

/* 边框圆角 */
.rounded-c10 { border-radius: 10%; }
.rounded-c20 { border-radius: 20%; }
.rounded-c30 { border-radius: 30%; }
.rounded-c40 { border-radius: 40%; }
.rounded-c50 { border-radius: 50%; }
.rounded-xs { border-radius: 4rpx; }
.rounded-sm { border-radius: 6rpx; }
.rounded-bm { border-radius: 8rpx; }
.rounded-lg { border-radius: 12rpx; }
.rounded-xl { border-radius: 14rpx; }
.rounded-2xl { border-radius: 16rpx; }
.rounded-3xl { border-radius: 18rpx; }
.rounded-xxl { border-radius: 22rpx; }
.rounded-none { border-radius: 0; }
.rounded-l-none { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.rounded-r-none { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.rounded-t-none { border-top-left-radius: 0; border-top-right-radius: 0; }
.rounded-b-none { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.rounded-tl-none { border-top-left-radius: 0; }
.rounded-tr-none { border-top-right-radius: 0; }
.rounded-bl-none { border-bottom-left-radius: 0; }
.rounded-br-none { border-bottom-right-radius: 0; }

/* 盒子阴影 */
.shadow { box-shadow: 0 1px 3px 0 rgb(0 0 0 / 10%); }
.shadow-sm { box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%); }
.shadow-md { box-shadow: 0 4px 6px -1px rgb(0 0 0 / 10%); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%); }
.shadow-xl { box-shadow: 0 20px 25px -5px rgb(0 0 0 / 10%); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 25%); }
.shadow-inner { box-shadow: inset 0 2px 4px 0 rgb(0 0 0 / 6%); }
.shadow-none { box-shadow: none; }

/* 不透明度 */
.opacity-0 { opacity: 0; }
.opacity-5 { opacity: 0.05; }
.opacity-10 { opacity: 0.1; }
.opacity-20 { opacity: 0.2; }
.opacity-25 { opacity: 0.25; }
.opacity-30 { opacity: 0.3; }
.opacity-40 { opacity: 0.4; }
.opacity-50 { opacity: 0.5; }
.opacity-60 { opacity: 0.6; }
.opacity-70 { opacity: 0.7; }
.opacity-75 { opacity: 0.75; }
.opacity-80 { opacity: 0.8; }
.opacity-90 { opacity: 0.9; }
.opacity-95 { opacity: 0.95; }
.opacity-100 { opacity: 1; }

/* 内外边距 */
@for $i from 0 through 100 {
    @if $i % 2 == 0 or $i % 5 == 0 {
        .m-#{$i} { margin: $i + rpx; }
        .mt-#{$i} { margin-top: $i + rpx; }
        .ml-#{$i} { margin-left: $i + rpx; }
        .mr-#{$i} { margin-right: $i + rpx; }
        .mb-#{$i} { margin-bottom: $i + rpx; }
        .mc-#{$i} { margin: ($i + rpx) auto; }
        .ma-#{$i} { margin: 0 ($i + rpx); }
        .mx-#{$i} { margin-right: $i + rpx; margin-left: $i + rpx; }
        .my-#{$i} { margin-top: $i + rpx; margin-bottom: $i + rpx; }
        .-mx-#{$i} { margin-right: "-" + $i + rpx; margin-left: "-" + $i + rpx; }
        .-my-#{$i} { margin-top: "-" + $i + rpx; margin-bottom: "-" + $i + rpx; }
        .-m-#{$i} { margin: "-" + $i + rpx; }
        .-mt-#{$i} { margin-top: "-" + $i + rpx; }
        .-ml-#{$i} { margin-left: "-" + $i + rpx; }
        .-mr-#{$i} { margin-right: "-" + $i + rpx; }
        .-mb-#{$i} { margin-bottom: "-" + $i + rpx; }

        .p-#{$i} { padding: $i + rpx; }
        .pt-#{$i} { padding-top: $i + rpx; }
        .pl-#{$i} { padding-left: $i + rpx; }
        .pr-#{$i} { padding-right: $i + rpx; }
        .pb-#{$i} { padding-bottom: $i + rpx; }
        .pc-#{$i} { padding: ($i + rpx) auto; }
        .pa-#{$i} { padding: 0 ($i + rpx); }
        .px-#{$i} { padding-right: $i + rpx; padding-left: $i + rpx; }
        .py-#{$i} { padding-top: $i + rpx; padding-bottom: $i + rpx; }
        .-px-#{$i} { padding-right: "-" + $i + rpx; padding-left: "-" + $i + rpx; }
        .-py-#{$i} { padding-top: "-" + $i + rpx; padding-bottom: "-" + $i + rpx; }
        .-p-#{$i} { padding: "-" + $i + rpx; }
        .-pt-#{$i} { padding-top: "-" + $i + rpx; }
        .-pl-#{$i} { padding-left: "-" + $i + rpx; }
        .-pr-#{$i} { padding-right: "-" + $i + rpx; }
        .-pb-#{$i} { padding-bottom: "-" + $i + rpx; }
    }
}

/* 定位距离 */
@for $i from 0 through 160 {
    @if $i % 2 == 0 or $i % 5 == 0 {
        .top-#{$i} { top: $i + rpx; }
        .-top-#{$i} { top: "-" + $i + rpx; }
        .right-#{$i} { right: $i + rpx; }
        .-right-#{$i} { right: "-" + $i + rpx; }
        .bottom-#{$i} { bottom: $i + rpx; }
        .-bottom-#{$i} { bottom: "-" + $i + rpx; }
        .left-#{$i} { left: $i + rpx; }
        .-left-#{$i} { left: "-" + $i + rpx; }
    }
}

/* 圆角幅度 */
@for $i from 0 through 50 {
    @if $i % 2 == 0 {
        .rounded-tl-#{$i} { border-top-left-radius: $i + rpx !important; }
        .rounded-tr-#{$i} { border-top-right-radius: $i + rpx !important; }
        .rounded-bl-#{$i} { border-bottom-left-radius: $i + rpx !important; }
        .rounded-br-#{$i} { border-bottom-right-radius: $i + rpx !important; }
        .rounded-#{$i} { border-radius: $i + rpx; }
    }
}

/* 宽度高度 */
@for $i from 0 through 200 {
    @if $i % 2 == 0 {
        .w-#{$i} { width: $i + rpx; }
        .h-#{$i} { height: $i + rpx; }
        .w-h-#{$i} { width: $i + rpx; height: $i + rpx; }
    }
}
